<template>
	<view class="container">
		<uni-popup ref="popup" type="top">
			<uni-card title="登录错误" extra="账号或密码错误">
			</uni-card>
		</uni-popup>
		<view>
			<uni-section title="登录" subTitle="账号:a 密码:a" type="line">
			</uni-section>
			<uni-forms style="margin-top:50px;" ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="用户名" name="username">
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="密 码" name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button name="login" @click="submit">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					username: 'a',
					password: 'a'
				},
				rules: {
					// 对name字段进行必填验证
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空',
						}]
					},
					// 对email字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					}
				}
			}
		},
		methods: {
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					uni.request({
						url: 'http://kamuzuki.top:8080/xms/resuser.action?op=login', //仅为示例，并非真实接口地址。
						data: {
							username: this.formData.username,
							pwd: this.formData.password
						},
						header:{
							'content-type':'application/json'
						},
						success: (res) => {
							if (res.data.code == 1) {
								uni.navigateTo({
									url: '../sucess/sucess',
									animationType: 'pop-in',
									animationDuration: 200
								});
							} else {
								this.$refs.popup.open('top')
							}
						}
					});
				}).catch(err => {
					console.log("请求出错了"+err)
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		margin-top: 200px;
	}
</style>
